<template>
  <div>
    <div>age ：{{ person.age }}</div>
    <button @click="changeName">改名字</button>
    <button @click="changeAge">改年龄</button>
    <button @click="changePerson">改整体</button>
  </div>
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue';

const person = ref({ name: '张三', age: 18 })
//房子没换 换了床
function changeName() {
  person.value.name = '李四'
}
//房子没换 换了沙发
function changeAge() {
  person.value.age = 19
}
//房子换了
function changePerson() {
  person.value = { name: '李四', age: 20 }
}
// 这个是自动监视 我个人感觉比watch好用多了
watchEffect(() => {
  console.log('走一个')
  if (person.value.age > 18) {
    console.log('走一个18以上')
  }
})
</script>

<style lang="scss" scoped></style>
